<template >
<div id="html">
    <div id="body">
        <div class="login-box" >
            <a  style="color: #5baba4;font-size: 40px">
                <span></span>
                Login
            </a>
            <br><br><br><br>
            <form>
                <div class="user-box">
                    <input type="text" name="" v-model="phonemail" required="">
                    <label >用户名</label>
                </div>
                <div class="user-box">
                    <input type="password" name="" v-model="pwd" required="">
                    <label >密码</label>
                </div>
                <a href="#" @click="login">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    登录
                </a>
            </form>
        </div>
    </div>
</div>
</template>

<script>

    //定义全局的正则表达式方便其他方法使用
    let pwd02= /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/

    //导入css样式
    require("./css/style.css")

    export default {
        name: "adminLogin",
        data(){
            return{
                phonemail:"",
                pwd:""
            }
        },
        methods:{
            login(){
                let phonemail = this.phonemail

                let pwd = this.pwd;

                let users = new URLSearchParams()

                     if (phonemail!=null){
                         users.append("suName",phonemail)
                     }   else {
                         this.error01()
                     }

                    //成功后判断密码
                    if (pwd02.test(pwd)) {
                        users.append("suPwd",pwd)

                        //异步登录跳转
                        this.$axios.post("adminlogin.action",users).
                        then(request=>{

                            if (request.data!=null && request.data!=""){
                                //存入sessionStorage
                                sessionStorage.setItem("suName",request.data.suName);
                                sessionStorage.setItem("suPwd",request.data.suPwd);
                                sessionStorage.setItem("suid",request.data.id);
                                //吧查到的用户数据存入全局的vuex中
                                //this.$store.dispatch("setSystemUser",request.data);
                                //跳转页面

                                this.$router.push("/Systemhome02");
                            }else{
                                this.error03()
                            }

                        }).
                        catch()


                    }else {
                        this.error02()
                    }


                },
            //失败后调用提示框方法
            error01() {
                this.$message.error('请输入用户名用户名!');
            },
            //失败后调用提示框方法
            error02() {
                this.$message.error('密码输入错误!');
            },
            error03() {
                this.$message.error('登陆失败!');
            }
            }
        }
</script>

<style scoped>

</style>
